<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>送给小王老师的生日礼物</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
  <link rel="stylesheet" type="text/css" href="css/jquery.fullpage.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="css/css3.css">
  <link rel="stylesheet" type="text/css" href="css/weather.css">
  <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
  <script type="text/javascript" src="js/jquery.fullpage.min.js"></script>
  123
  <style type="text/css">
    .spinner {
      width: 20vw;
      height: 20vw;
      background-color: pink;

      margin: 45vh auto;
      -webkit-animation: rotateplane 1.2s infinite ease-in-out;
      animation: rotateplane 1.2s infinite ease-in-out;
    }
    canvas {
      background-image: url("img/night.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin: 0;
      padding: 0;
    }

    @-webkit-keyframes rotateplane {
      0% {
        -webkit-transform: perspective(30vw)
      }

      50% {
        -webkit-transform: perspective(30vw) rotateY(180deg)
      }

      100% {
        -webkit-transform: perspective(30vw) rotateY(180deg) rotateX(180deg)
      }
    }

    @keyframes rotateplane {
      0% {
        transform: perspective(30vw) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(30vw) rotateX(0deg) rotateY(0deg)
      }

      50% {
        transform: perspective(30vw) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(30vw) rotateX(-180.1deg) rotateY(0deg)
      }

      100% {
        transform: perspective(30vw) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(30vw) rotateX(-180deg) rotateY(-179.9deg);
      }
    }
  </style>
</head>

<body>
  <div id="music">
    <img src="img/music_pointer.png">
    <img class="play" id="muc" src="img/music_disc.png">
  </div>
  <div id="fullpage">
    <div class="section section1">
      <div id="loada" style=" 
          width: 100%;
          height: 100%;
          background: white;
          z-index: 100;
          position: absolute;">
        <p style="
          text-align: center;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: 35vh auto;
          font-size: 8vw;
          ">礼物打开中...
        </p>
        <div class="spinner"></div>
      </div>
      <div class="page1">
        <img class="qiqiu" src="img/qiqiu.png">
        <img class="yun-1" src="img/yun-1.png">
        <img class="yun-2" src="img/yun-2.png">
        <img class="shu" src="img/shu.png">
        <p>开启礼物<br><span style="font-size: 40px;">(往下滑)</span></p>
        <img class="down" src="img/down.png">
      </div>
    </div>
    <div class="section section2">
      <div class="page2">
        <img src="img/bg-2-top.png">
        <img id="page2wz" class="bbbplay" src="img/bg-2-wz.png">
        <img class="bg-2-bottom" src="img/bg-2-bottom.png">
        <div class="aaa" id="aaa"><img class="p2-but" src="img/p2-but.png"></div>
        <div class="mes-bg" id="mes-bg"></div>
        <div class="mes-con" id="mes-con">
          <img src="img/close.png" class="close" id="close">
          <img src="img/mes-1.png">
        </div>
      </div>
    </div>
    <div class="section section3">
      <div class="page-3">
        <div style="height:1px;"></div>
        <div class="p3-1" id="p3-1">
          <img src="img/p3-but.png">
          <img src="img/p3-1.png">
          <img src="img/p3-2.png">
          <img src="img/p3-3.png" id="p3-but">
        </div>
        <div class="p3-2" id="p3-2">
          <div class="snow-con">
            <div class="weather snow"></div>
          </div>
          <div class="p3wz-con">
            <img src="img/pg3-wz1.png" id="pg3-wz1">
            <img src="img/pg3-wz2.png" id="pg3-wz2">
            <img src="img/close-p3.png" id="close-p3">
          </div>
        </div>
      </div>
    </div>
    <div class="section section4">
      <div class="page-4">
        <div class="p4-1">
          <div class="squ-space">
            <div class="squ-con" id="con-0">
              <div class="con-1" id="con-1">
                <div class="con-2" id="con-2">
                  <div class="squ" id="squ-1"></div>
                  <div class="squ" id="squ-2"></div>
                  <div class="squ" id="squ-3"></div>
                  <div class="squ" id="squ-4"></div>
                  <div class="squ" id="squ-5"></div>
                  <div class="squ" id="squ-6"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="p4-2" id="p4-but">
        </div>
      </div>
    </div>
    <div class="section section5">
      <div class="page-5">
        <div class="stars-con" id="stars">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
          <img src="img/stars.png">
        </div>
        <div class="start-1">
          <img src="img/stars.png">
        </div>
        <div class="start-2">
          <img src="img/stars.png">
        </div>
        <div class="start-3">
          <img src="img/stars.png">
        </div>
        <div class="start-4">
          <img src="img/stars.png">
        </div>
        <div class="start-5">
          <img src="img/stars.png">
        </div>
        <div class="no-no">
          <img src="img/girl-1.png">
          <img src="img/girl-2.png">
          <img src="img/girl-3.png">
          <img src="img/girl-4.png">
          <img src="img/girl-5.png">
          <img src="img/girl-6.png">
        </div>
        <div class="p5-p" id="girl"></div>
      </div>
    </div>
    <div class="section section6">
      <div class="wavy">
        <span style="--i:1">烟</span>
        <span style="--i:2">火</span>
        <span style="--i:3">向</span>
        <span style="--i:4">星</span>
        <span style="--i:5">辰</span>
        <br/>
        <span style="--i:6">所</span>
        <span style="--i:7">愿</span>
        <span style="--i:8">皆</span>
        <span style="--i:9">成</span>
        <span style="--i:10">真</span>
      </div>
      <canvas id="canvas">您的浏览器不支持</canvas>
    </div>
  </div>

  <audio id="bgm" autoplay="autoplay" loop="loop" src="aduio/bgm.mp3"></audio>

  <script type="text/javascript">
    var t;
    var aaa = document.getElementById('aaa');
    var page2wz = document.getElementById('page2wz');
    var girl = document.getElementById('girl');
    var stars = document.getElementById('stars');
    function page2() {
      aaa.setAttribute('class', 'aaa aaaplay');
      page2wz.setAttribute('class', 'bbbplay');
    }
    function page2left() {
      aaa.setAttribute('class', 'aaa');
      page2wz.setAttribute('class', '');

    }
    function page5() {
      girl.setAttribute('class', 'p5-p p5-pplay');
      setTimeout(function () {
        stars.style.display = "block";
      }, 3000)

    };
    function page5left() {
      girl.setAttribute('class', 'p5-p');
      stars.style.display = "none";
    };
    $(document).ready(function () {
      $("#fullpage").fullpage({
        sectionsColor: ['#6ac0bd', 'white', 'red', 'orange'],
        css3: true,
        loopBottom: true,//paddingTop,paddingBottom
        fixedElements: '#music',
        afterLoad: function (link, index) {
          switch (index) {
            case 1:
              break;
            case 2: page2();
              break;
            case 3:
              break;
            case 4:
              break;
            case 5: page5();
              break;
          }
        },

        onLeave: function (link, index) {
          switch (index) {
            case 1:
              break;
            case 2: page2left();
              break;
            case 3:
              break;
            case 4:
              break;
            case 5: page5left();
              break;
          }
        },
      });
    });
  </script>
  <script type="text/javascript" src="js/myjs.js"></script>
  <script type="text/javascript" src="js/firework.js"></script>
</body>

</html>